<template>
	<view class="flex-col page">
		<view class="flex-col self-stretch">
			<MyHeader title="个人信息"></MyHeader>
			<view class="flex-col justify-start relative group_2">
				<view class="flex-col section_4">
					<view class="flex-col group_3">
						<view class="flex-row items-center group_4">
							<text class="font text">学号</text>
							<input class="ml-42 font_2 custom-input" placeholder-class="placeholder-style" placeholder="请输入学号" v-model="userInfo.studentId"></input>
						</view>
						<view class="flex-row items-center group_4">
							<text class="font text_2">昵称</text>
							<input class="ml-42 font_2 custom-input" placeholder-class="placeholder-style" placeholder="请输入您的昵称" v-model="userInfo.nickName"></input>
						</view>
						<view class="flex-row items-center group_4">
							<text class="font text_4">姓名</text> <input class="ml-42 font_2 custom-input" placeholder-class="placeholder-style" placeholder="请输入您的姓名"
								v-model="userInfo.userName"></input>
						</view>
						<view class="flex-row items-center group_4">
							<text class="font">年龄</text> <input class="ml-42 font_2 custom-input" placeholder-class="placeholder-style" placeholder="请输入你的年龄"
								v-model="userInfo.userAge"></input>
						</view>
						<view class="flex-row justify-between items-center group_4 ">
							<view class="flex-row items-center startSelect">
								<text class="font text_7">性别</text>
								<text class="ml-42 font_2" style="    width: 100%;color: #333;"
									@click="showgender = true">{{userInfo.gender||'请选择您的性别'}}</text>
								<up-picker :show="showgender" :columns="range1" @confirm="confirmGender"
									@cancel="showgender = false"></up-picker>

							</view>
						</view>
						<view class="flex-row items-center group_4">
							<text class="font text_8">电话号码</text>
							<input class="ml-42 font_2 custom-input" placeholder-class="placeholder-style" placeholder="请输入您的电话号码" v-model="userInfo.phoneNumber"></input>
						</view>
						<view class="flex-row justify-between items-center group_4">
							<view class="flex-row items-center">
								<text class="font text_10">院系名称</text> <input class="ml-42 font_2 custom-input"
								 placeholder-class="placeholder-style"	placeholder="请输入您的院系名称" v-model="userInfo.departmentName"></input>
							</view>
							<image class="image_7"
								src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=e75043c838818b06bf1489cccddb4d91.png" />
						</view>
						<view class="flex-row justify-between group_5">
							<view class="flex-row items-baseline">
								<text class="font text_12" style="margin-right: 40px;">入学年份</text>
								<up-datetime-picker hasInput :show="timePickerShow" v-model="userInfo.enrollmentYear"
									mode="date"></up-datetime-picker>
							</view>
							<image class="image_7 image_8"
								src="https://ide.code.fun/api/image?token=677635d7defdb10011116f2f&name=e75043c838818b06bf1489cccddb4d91.png" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="confirmBtnBox" @click="editorSelfinfo">
			<button type="primary"
				style="color:#ffffff;background: rgba(76, 142, 239, 1);borderColor: rgba(76, 142, 239, 1)">确定</button>
		</view>

	</view>
</template>

<script setup>
	import {
		getuserInfoAPI,
		editoruserInfoAPI
	} from '@/apis/my/selfInfo.js'
	import {
		useUserStore
	} from '@/store/useUserStore';
	import {
		ref
	} from 'vue'
	import dayjs from 'dayjs';
	const userStore = useUserStore()


	const userInfo = ref({
		departmentName: null,
		enrollmentYear: new Date(),
		gender: null,
		id: null,
		imageUrl: null,
		nickName: null,
		openid: null,
		phoneNumber: null,
		studentId: null,
		userAge: null,
		userName: null,
		userSig: null,

	})
	const getuserInfo = async () => {
		const res = await getuserInfoAPI(userStore.userInfo.id)
		userInfo.value = res.data
		if (+userInfo.value.gender == 1) {
			userInfo.value.gender = "男"
		} else {
			userInfo.value.gender = "女"
		}
		userInfo.value.enrollmentYear = Date.parse(userInfo.value.enrollmentYear)
	}
	getuserInfo()


	const range1 = ref([
		['女', '男']
	]);
	const timePickerShow = ref(false)
	const showgender = ref(false)

	const confirmGender = (e) => {
		userInfo.value.gender = e.value[0]
		showgender.value = false
	}

	const editorSelfinfo = async () => {
		userInfo.value.id = userStore.userInfo.id
		userInfo.value.openid = userStore.userInfo.openid
		if (userInfo.value.gender == '男') {
			userInfo.value.gender = 1
		} else {
			userInfo.value.gender = 0
		}
		userInfo.value.enrollmentYear = dayjs(userInfo.value.enrollmentYear).format('YYYY-MM-DD');
		const res = await editoruserInfoAPI(userInfo.value)
		if (res.data) {
			getuserInfo()
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .custom-input::placeholder {
	    color: #333 !important; /* 设置为所需的颜色 */
	}
	::v-deep .placeholder-style{
		color: #333 !important; /* 设置为所需的颜色 */
	}
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.ml-41 {
		margin-left: 82rpx;
	}

	.ml-43 {
		margin-left: 86rpx;
	}

	.page {
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 36rpx 12rpx 42rpx 34rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
	}

	.group {
		padding: 0 16rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		height: 64rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.group_2 {
		padding-top: 16rpx;
	}

	.section_4 {
		margin: 0 24rpx;
		padding: 8rpx 22rpx 0;
		background-color: #ffffff;
		border-radius: 31.1rpx;
	}

	.group_3 {
		border-bottom: solid 1rpx #e5e5e5;
	}

	.group_4 {
		padding: 32rpx 8rpx;
		border-bottom: solid 1rpx #e5e5e5;
	}

	.font {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.6rpx;
		color: #333333;
	}

	.text {
		line-height: 29.66rpx;
	}

	.text_2 {
		line-height: 29.4rpx;
	}

	.text_4 {
		line-height: 29.5rpx;
	}

	.text_7 {
		line-height: 29.56rpx;
	}

	.image_7 {
		margin-right: 4rpx;
		width: 14rpx;
		height: 26rpx;
	}

	.group_5 {
		padding: 32rpx 8rpx;
	}

	.text_8 {
		line-height: 29.38rpx;
	}

	.group_6 {
		padding: 56rpx 0 36rpx;
	}

	.text_10 {
		line-height: 29.72rpx;
	}

	.text_12 {
		line-height: 29.76rpx;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 25.98rpx;
		color: #333;
	}

	.text_11 {
		line-height: 26.04rpx;
	}

	.text_9 {
		line-height: 25.88rpx;
	}

	.text_6 {
		line-height: 25.9rpx;
	}

	.text_5 {
		line-height: 25.84rpx;
	}

	.text_3 {
		line-height: 25.9rpx;
	}

	.text_13 {
		line-height: 26.06rpx;
	}

	.image_8 {
		margin-right: 8rpx;
	}

	.section_5 {
		background-color: #f7f8fa;
		height: 16rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		right: 0;
		top: 608rpx;
	}

	.text-wrapper {
		margin-top: 120rpx;
		padding: 28rpx 0;
		background-color: #4c8eef;
		border-radius: 56rpx;
		width: 578rpx;
	}

	.text_14 {
		color: #ffffff;
		line-height: 30.04rpx;
	}

	.section_6 {
		margin-top: 290rpx;
		background-color: #ffffff;
		height: 68rpx;
	}

	.startSelect {
		display: flex;
		align-items: center;
		width: 100%;

		// justify-content: center;
		.selectStyle {
			width: 80%;
			margin-left: 40px;
		}
	}

	.confirmBtnBox {
		padding: 0 50px;
		margin: 30px 0 0;
	}
</style>